<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FIGMA | Макеты для верстки — Верстка страницы</title>
	<meta name="description" content="Макет для верстки сайта был взял с телеграм канала FIGMA | Макеты для верстки">
    <link rel="stylesheet" href="./css/main.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>

    <!-- Начало: Данный блок удалять нельзя -->
    <div class="maketforfigma">
        <a href="https://t.me/s/FigmaToHTML" target="_blank">
            <img src="img/logo.png">
        </a>
        <div>
            <p>
                Данная верстка, была реализована пользователем в рамках обучающего телеграм канал <a href="https://t.me/s/FigmaToHTML" target="_blank">FIGMA | Макеты для верстки</a>
            </p>
            <p>
                При помощи <a href="https://t.me/HtmlCodeForMoney_bot?from_git" target="_blank">Telegram-бота</a> пользователь получил оплату за верстку этого макета.
            </p>
        </div>
    </div>
    <!-- Конец -->

    <div class="wrapper">
    <div class="main">
        <header class="header">
            <div class="nav">
                <p class="logo">Bra<span>vaa</span></p>
                <ul>
                    <li><a href="#" class="nav-menu">home</li>
                    <li><a href="#" class="nav-menu">programm</li>
                    <li><a href="#" class="nav-menu">community</li>
                    <li><a href="#" class="nav-menu">Pricing</li>
                </ul>
                <div class="line-vertical"></div>
                <a href="#" class="nav-login">login</a>
                <a href="#" class="nav-btn">sign up</a>
            </div>

            <h1 class="header-headingh">help for ideal body fitness</h1>
            <p class="header-text">Craftmanship inexpensive runway stylish waistline trendwatching sleeveless urban skirt comfortable posture glitter hair. Signature condition high heels artistic urban.</p>
            <div class="header-button">
                <a href="#" class="stated-btn">get stated</a>
                <a href="#popupopen" class="video-btn"></a>
                <p class="video-text">watch video</p>
            </div>
            <div class="heart">
                <div class="heart-img"></div>
                <p class="heart-text">heart rate</p>
                <p class="heart-text-two">2245 <samp class="heart-text-span">bpm</samp></p>
            </div>
            <div class="colories">
                <p class="colories-text">daily calories</p> 
                <p class="colories-text-two">1020 <samp class="colories-text-span">cal</samp></p>  
                <div class="colories-graf">
                    <div class="indicator48">
                        <div class="indicator-value1"></div>
                    </div>

                    <div class="indicator64">
                        <div class="indicator-value2"></div>
                    </div>

                    <div class="indicator52">
                        <div class="indicator-value3"></div>
                    </div>

                    <div class="indicator56">
                        <div class="indicator-value4"></div>
                    </div>

                    <div class="indicator66">
                        <div class="indicator-value5"></div>
                    </div>

                    <div class="indicator61">
                        <div class="indicator-value6"></div>
                    </div>
                </div>             
            </div>

            <div class="elipse elipse-one"></div>
            <div class="elipse elipse-two"></div>
            <div class="cub-block cub-block-one">
                <div class="cub-dark"></div>
                <div class="cub-light"></div>
                <div class="cub-dark"></div>
                <div class="cub-light"></div>
                <div class="cub-light"></div>
                <div class="cub-dark"></div>
                <div class="cub-light"></div>
                <div class="cub-dark"></div>
            </div>
            <div class="cub-block cub-block-two">
                <div class="cub-dark"></div>
                <div class="cub-light"></div>
                <div class="cub-dark"></div>
                <div class="cub-light"></div>
                <div class="cub-light"></div>
                <div class="cub-dark"></div>
                <div class="cub-light"></div>
                <div class="cub-dark"></div>
            </div>
            <div class="star7"></div>
            <div class="star8"></div>
            <h5 class="fitness">fitness</h5>
        </header>

        <section class="achievements">
            <div class="achievements-item">
                <p class="achievements-item-meaning">70+</p>
                <p class="achievements-item-text">exercise program</p>
            </div>

            <div class="achievements-item">
                <p class="achievements-item-meaning">800+</p>
                <p class="achievements-item-text">total coach</p>
            </div>

            <div class="achievements-item">
                <p class="achievements-item-meaning">4000+</p>
                <p class="achievements-item-text">members</p>
            </div>
        </section>

        <section class="partners">
            <a href="#" title="Amazon"><img src="./icon/Amazon.svg" alt=""></a>
            <a href="#" title="Google"><img src="./icon/Google.svg" alt=""></a>
            <a href="#" title="Microsoft"><img src="./icon/Microwsoft.svg" alt=""></a>
            <a href="#" title="NETFLIX"><img src="./icon/Netflix.svg" alt=""></a>
        </section>

        <section class="programm">
            <h2 class="programm-title">our program build your best body</h2>
            <div class="dumbbell"></div>
            <div class="programm-block">
                <div class="programm-item">
                    <img class="programm-item-img" src="./icon/prog/barbell 1.svg" alt="strenght">
                    <p class="programm-item-title">strenght</p>
                    <p class="programm-item-text">Value proposition investor churn rate pitch.</p>
                    <a class="programm-item-link" href="#">join now</a>
                </div>

                <div class="programm-item">
                    <img class="programm-item-img" src="./icon/prog/fitness.svg" alt="Fitness">
                    <p class="programm-item-title">physical fitness</p>
                    <p class="programm-item-text">Value proposition investor churn rate pitch.</p>
                    <a class="programm-item-link" href="#">join now</a>
                </div>

                <div class="programm-item">
                    <img class="programm-item-img" src="./icon/prog/muscule.svg" alt="muscule">
                    <p class="programm-item-title">flex muscle</p>
                    <p class="programm-item-text">Value proposition investor churn rate pitch.</p>
                    <a class="programm-item-link" href="#">join now</a>
                </div>

                <div class="programm-item">
                    <img class="programm-item-img" src="./icon/prog/fatOut.svg" alt="fat lose">
                    <p class="programm-item-title">fat lose</p>
                    <p class="programm-item-text">Value proposition investor churn rate pitch.</p>
                    <a class="programm-item-link" href="#">join now</a>
                </div>
            </div>
        </section>

        <section class="reasons">
            <h2 class="reasons-title">why join us?</h2>
            <p class="reasons-text">Value proposition investor churn rate pitch partnership success crowdsource. Entrepreneur first mover advantage niche Low hanging fruit iteration infographic. Churn rate analytics.</p>
            <ul>
                <li class="reasons-list"> we have prOfessional best trainer</li>
                <li class="reasons-list">free join community</li>
                <li class="reasons-list">one free program for new members</li>
                <li class="reasons-list">100+ awards</li>
            </ul>

            <div class="reasons-img">
                <div class="reasons-img-small">
                    <div class="reasons-img-small-item">
                        <img src="./img/pic/Rectangle 484.png" alt="">
                    </div>
                    <div class="reasons-img-small-item">
                        <img src="./img/pic/Rectangle 486.png" alt="">
                    </div>
                </div>
                <div class="reasons-img-big">
                    <img src="./img/pic/Rectangle 485.png" alt="">
                </div>
            </div>
        </section>

        <section class="price">
            <h2 class="price-title">our pricing plan</h2>
            <p class="price-text">Partnership  testing buzz leverage bandwidth seed round funding niche market investor startup stock client holy grail design prototype.</p>
            <div class="price-block">
                <div class="price-item">
                    <h5 class="item-title">basic plan</h5>
                    <p class="item-text">$110</p>
                    <ul>
                        <li class="price-list-yes">5 days in a weak</li>
                        <li class="price-list-yes">01 sweatshirt</li>
                        <li class="price-list-yes">01 bottle of protein</li>
                        <li class="price-list-no">access to videos</li>
                        <li class="price-list-no">muscle stretching</li>
                    </ul>
                    <a class="price-btn" href="#">join now</a>
                </div>

                <div class="price-item">
                    <h5 class="item-title">weakly plan</h5>
                    <p class="item-text">$190</p>
                    <ul>
                        <li class="price-list-yes">5 days in a weak</li>
                        <li class="price-list-yes">01 sweatshirt</li>
                        <li class="price-list-yes">01 bottle of protein</li>
                        <li class="price-list-yes">access to videos</li>
                        <li class="price-list-no">muscle stretching</li>
                    </ul>
                    <a class="price-btn" href="#">join now</a>
                </div>

                <div class="price-item">
                    <h5 class="item-title">monthly plan</h5>
                    <p class="item-text">$380</p>
                    <ul>
                        <li class="price-list-yes">5 days in a weak</li>
                        <li class="price-list-yes">01 sweatshirt</li>
                        <li class="price-list-yes">01 bottle of protein</li>
                        <li class="price-list-yes">access to videos</li>
                        <li class="price-list-yes">muscle stretching</li>
                    </ul>
                    <a class="price-btn" href="#">join now</a>
                </div>
            </div>
        </section>

        <section class="reviews">
            <h2 class="reviews-title">what our happy clients say about us</h2>
            <p class="reviews-text">Early adopters innovator iPad facebook infographic pitch growth hacking. Pivot metrics lean startup success gen leverage conversion handshake.</p>
            <div class="reviews-slider-fild">
                <div class="reviews-slider-img">
                    <img src="./img/pic/happy-fat-man-tape-measure-around-his-neck-isolated-white-background-30923461-removebg-preview 1.png" alt="">
                </div>
                <div class="reviews-slider-decor">
                    <img src="./img/pic/bx_bxs-quote-left.png" alt="">
                </div>
                <div class="reviews-slider-decor-two">
                    <img src="./icon/bottle_barell.svg" alt="">
                </div>
                <div class="cub-block cub-block-one">
                    <div class="cub-dark"></div>
                    <div class="cub-light"></div>
                    <div class="cub-dark"></div>
                    <div class="cub-light"></div>
                    <div class="cub-light"></div>
                    <div class="cub-dark"></div>
                    <div class="cub-light"></div>
                    <div class="cub-dark"></div>
                </div>


                <div class="reviews-slider">
                    <div class="reviews-slider-block">
                        <div class="reviews-slider-line">
                            <div class="reviews-slider-item">
                                <h6 class="reviews-clien-name">jeason roy</h6>
                                <p class="reviews-client-status">member</p>
                                <div class="reviews-client-star">
                                    <img title="stars for the review" src="./icon/clent-reviews-star.svg" alt="Star for reviews">
                                </div>
                                <p class="reviews-client-text">Assets learning curve vesting period direct mailing scrum project ramen user experience first mover advantage infographic early adopters. Sales marketing freemium termsheet MVP interaction design focus early adopters hypotheses creative facebook nondisclosure agreement android prototype. </p>
                                <p class="reviews-client-text">Assets learning curve vesting period direct mailing scrum project ramen user experience first mover advantage infographic early adopters. Sales marketing freemium. </p>
                            </div>

                            <div class="reviews-slider-item">
                                <h6 class="reviews-clien-name">jeason ivan</h6>
                                <p class="reviews-client-status">member</p>
                                <div class="reviews-client-star">
                                    <img title="stars for the review" src="./icon/clent-reviews-star.svg" alt="Star for reviews">
                                </div>
                                <p class="reviews-client-text">Assets learning curve vesting period direct mailing scrum project ramen user experience first mover advantage infographic early adopters. Sales marketing freemium termsheet MVP interaction design focus early adopters hypotheses creative facebook nondisclosure agreement android prototype. </p>
                                <p class="reviews-client-text">Assets learning curve vesting period direct mailing scrum project ramen user experience first mover advantage infographic early adopters. Sales marketing freemium. </p>
                            </div>

                            <div class="reviews-slider-item">
                                <h6 class="reviews-clien-name">jeason sam</h6>
                                <p class="reviews-client-status">member</p>
                                <div class="reviews-client-star">
                                    <img title="stars for the review" src="./icon/clent-reviews-star.svg" alt="Star for reviews">
                                </div>
                                <p class="reviews-client-text">Assets learning curve vesting period direct mailing scrum project ramen user experience first mover advantage infographic early adopters. Sales marketing freemium termsheet MVP interaction design focus early adopters hypotheses creative facebook nondisclosure agreement android prototype. </p>
                                <p class="reviews-client-text">Assets learning curve vesting period direct mailing scrum project ramen user experience first mover advantage infographic early adopters. Sales marketing freemium. </p>
                            </div>

                            <div class="reviews-slider-item">
                                <h6 class="reviews-clien-name">jeason nick</h6>
                                <p class="reviews-client-status">member</p>
                                <div class="reviews-client-star">
                                    <img title="stars for the review" src="./icon/clent-reviews-star.svg" alt="Star for reviews">
                                </div>
                                <p class="reviews-client-text">Assets learning curve vesting period direct mailing scrum project ramen user experience first mover advantage infographic early adopters. Sales marketing freemium termsheet MVP interaction design focus early adopters hypotheses creative facebook nondisclosure agreement android prototype. </p>
                                <p class="reviews-client-text">Assets learning curve vesting period direct mailing scrum project ramen user experience first mover advantage infographic early adopters. Sales marketing freemium. </p>
                            </div>
                        </div>
                    </div>
                    <div class="reviews-slider-btn-block">
                        <div class="slider-btn btn-forward btn-active">
                            <p class="arrow-forward">&#10230</p>
                        </div>
                        <div class="slider-btn btn-back">
                            <p class="arrow-back">&#10230</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="subcribe">
            <h2 class="subcribe-title">subcribe our daily tips</h2>
            <p class="subcribe-text">Hackathon early adopters innovator iPad facebook infographic pitch growth hacking. Pivot metrics lean startup.</p>
            <form class="subcribe-form" action="#">
                <input type="email" class="subcribe-form-email" placeholder="enter email address">
                <input type="button" value="subscribe" class="subcribe-form-btn">
            </form>

            <div class="cub-block cub-block-three">
                <div class="cub-dark"></div>
                <div class="cub-light"></div>
                <div class="cub-dark"></div>
                <div class="cub-light"></div>
                <div class="cub-light"></div>
                <div class="cub-dark"></div>
                <div class="cub-light"></div>
                <div class="cub-dark"></div>
            </div>
            <div class="cub-block cub-block-four">
                <div class="cub-dark"></div>
                <div class="cub-light"></div>
                <div class="cub-dark"></div>
                <div class="cub-light"></div>
                <div class="cub-light"></div>
                <div class="cub-dark"></div>
                <div class="cub-light"></div>
                <div class="cub-dark"></div>
            </div>
            <div class="subcribe-star">
                <img src="./icon/Star 6.svg" alt="">
            </div>
        </section>

        <footer class="footer">
            <div class="footer-social">
                <p class="logo">Bra<span>vaa</span></p>
                <p class="footer-social-text">User experience iPhone backing focus responsive web design leverage analytics.</p>
                <div class="footer-social-icon">
                    <a href="#"><img class="social-icon" src="./icon/fb_icon.svg" alt=""></a>
                    <a href="#"><img class="social-icon" src="./icon/twitter_icon.svg" alt=""></a>
                    <a href="#"><img class="social-icon" src="./icon/instagram_icon.svg" alt=""></a>
                </div>
            </div>

            <div class="footer-navigation">
                <a class="footer-navigation-headblock" href="#">services</a>
                <a class="footer-navigation-item" href="#">flex muscle</a>
                <a class="footer-navigation-item" href="#">physical fitness</a>
                <a class="footer-navigation-item" href="#">fat lose</a>
                <a class="footer-navigation-item" href="#">strength</a>
            </div>

            <div class="footer-navigation">
                <a class="footer-navigation-headblock" href="#">pricing</a>
                <a class="footer-navigation-item" href="#">basic plan</a>
                <a class="footer-navigation-item" href="#">weakly plan</a>
                <a class="footer-navigation-item" href="#">monthly plan</a>
            </div>

            <div class="footer-navigation">
                <a class="footer-navigation-headblock" href="#">company</a>
                <a class="footer-navigation-item" href="#">about us</a>
                <a class="footer-navigation-item" href="#">careers</a>
                <a class="footer-navigation-item" href="#">customers</a>
                <a class="footer-navigation-item" href="#">partners</a>
            </div>

            <div class="footer-navigation">
                <a class="footer-navigation-headblock" href="#">support</a>
                <a class="footer-navigation-item" href="#">FAQs</a>
                <a class="footer-navigation-item" href="#">contact us</a>
            </div>
        </footer>
    </div>

    <div id="popupopen" class="popup">
        <p class="popup-close">Закрыть</p>
        <div class="popup-table">
            <div class="popup-video">
                <video id="video" src="./video/Arnold-motivation.mp4" loop="loop" width="441.6" height="576" controls></video>
            </div>
        </div>
    </div>
    </div>
    <script src="./js/main.js"></script>
</body>
</html>